<template>
	<view class='address'>
		<sidebar></sidebar>
		<view class='btns'>
			<!-- <u-button @click="goPage('./map')" color='#f8e801' type="primary"
				:text="$t('address.addBtn')"></u-button> -->
			<u-button @click="goMap" style="color:#000;background-color: #f8e801;border:none;" type="primary" :text="$t('address.addBtn')"></u-button>
		</view>
		<view class='content'>
			
			<view class='list' v-if='list.length>0'>
				<view class='add' v-for="(item,index) in list" :key='index'>
					<view class='addInfo' @click="selectAddress(item)">
						<view class='area'>{{item.area?item.area:'-'}}</view>
						<view class='detail'>{{item.address?item.address:'-'}}</view>
						<view class='person'>{{item.last_name+' '+item.first_name}} <text>{{item.mobile}}</text></view>
					</view>
					<view class='opBtn dFlex jBetween_aCenter'>
						<u-switch @change='changeDefault(item.address_id)' v-model="item.is_default" :activeValue='1'
							:inactiveValue='0' activeColor='#f8e801' style="transform: scale(0.6);"></u-switch>
						<u-icon @click='editAdd(item)' name="edit-pen" color="#f8e801" size="28"
							style="margin-left: auto;margin-right:12px"></u-icon>
						<u-icon @click='delAdd(item.address_id)' name="trash" color="#f8e801" size="28"></u-icon>
					</view>
				</view>
			</view>
			<u-empty v-else :text='$t("coupon.empty")' mode="data" >
			</u-empty>
			
		</view>
	</view>
</template>

<script>
	import sidebar from '@/components/sidebar.vue'
	export default {
		components: {
			sidebar
		},
		data() {
			return {
				cid: '',
				cart_ids: '',
				list: [],
				lng: '',
				lat: ''
			};
		},
		onLoad(options) {
			this.cid = options.cid ?? ''
			this.cart_ids = options.cart_ids ?? ''
		},
		onShow() {
			uni.setNavigationBarTitle({
				title: this.$t('pages.address'),
			})
			this.getAddList();
			this.getPosition();
		},
		onPullDownRefresh() {
			this.getAddList()
			
			uni.stopPullDownRefresh(); // 停止下拉刷新动画
		},
		methods: {
			getPosition() {
				uni.getLocation({
					type: 'wgs84',
					altitude: true,
					geocode: false,
					success: (location) => {
						if (!this.id) {
							console.log('经纬度', location);
							this.lat = Number(location.latitude);
							this.lng = Number(location.longitude);
						}
					},
					fail: (err) => {
						console.log(err);
					}
				})
			},
			goMap() {
				uni.navigateTo({
					url: '/pages/editAdd'
				})
				// const _this = this
				// uni.chooseLocation({
				// 	latitude: _this.lat,
				// 	longitude: _this.lng,
				// 	success(res) {
				// 		console.log('map', res)
				// 		const addressInfo = res.address.split(',')
				// 		const address = addressInfo[0] ?? ''
				// 		let content = addressInfo[1] ?? ''
				// 		if (addressInfo[2]) {
				// 			content += addressInfo[2]
				// 		}
				// 		if (addressInfo[3]) {
				// 			content += addressInfo[3]
				// 		}
				// 		_this.goEdit(res, content, address)
				// 	},
				// 	fail(err) {
				// 		console.log('err', err)
				// 	}
				// })
			},
			goEdit(res, content, address) {
				uni.navigateTo({
					url: '/pages/editAdd?lat=' + res.latitude + '&lng=' + res.longitude +
						'&content=' + encodeURIComponent(content) + '&address=' +
						encodeURIComponent(address)
				})
			},
			selectAddress(item) {
				if (this.cart_ids) {
					uni.navigateTo({
						url: '/pages/settlement?cart_ids=' + this.cart_ids + '&cid=' + this.cid + '&aid=' + item
							.address_id
					})
				}
				return
			},
			async getAddList() {
				const result = await this.$api('/user/address_list');
				console.log(result);
				if (result && result.length) {
					this.list = result;
				} else {
					this.list = [];
				}
			},
			// 设置默认
			async changeDefault(id) {
				const result = await this.$api('/user/set_default', {
					id: id,
				});
				if (result) {
					this.getAddList();
				}
			},
			// 删除地址
			async delAdd(id) {
				uni.showModal({
					title: this.$t('address.tips'),
					content: this.$t('address.tipContent'),
					confirmText: this.$t('operateBtn.sureBtn'),
					cancelText: this.$t('operateBtn.cancelBtn'),
					success: async (op) => {
						if (op.confirm) {
							const result = await this.$api('/user/del_address', {
								id: id,
							});
							if (result) {
								uni.showToast({
									title: this.$t('address.tipResult'),
									icon: "success"
								})
								this.getAddList();
							}
						}
					}
				})
			},
			// 编辑地址
			editAdd(add) {
				uni.navigateTo({
					url: './editAdd?addInfo=' + JSON.stringify(add) + '&cart_ids=' + this.cart_ids + '&cid=' + this
						.cid,
				})
			},
			goPage(url) {
				if (this.cart_ids) {
					uni.navigateTo({
						url: url + '?cart_ids=' + this.cart_ids + '&cid=' + this.cid,
					})
				} else {
					uni.navigateTo({
						url: url,
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		.add {
			.opBtn {
				padding-top: 10px;
				margin-top: 10px;
				border-top: 1px solid rgba(0, 0, 0, 0.1);
			}

			.person {
				text {
					display: inline-block;
					margin-left: 5px;
					color: #999999;
				}
			}

			.detail {
				font-size: 16px;
				margin: 5px 0;
			}

			.area {
				font-size: 12px;
				color: #999999;
			}

			width: 100%;
			padding: 12px;
			box-sizing: border-box;
			background: white;
			border-radius: 4px;
			margin-bottom: 12px;
		}

		width: 100%;
		padding: 10px 12px;
		box-sizing: border-box;
	}

	.btns {
		.saveBtn {
			width: 100%;
			background: $main;
			color: white;
			text-align: center;
			border-radius: 4px;
			padding: 10px 0;
		}

		width: 100%;
		padding: 12px;
		background: white;
		
		box-sizing:border-box;
	}

	::v-deep.u-switch {
		transform: scale(0.8) !important;
	}
</style>